<template>
    <nav-header @add="add"></nav-header>
    <nav-main :list="list" @del='del'></nav-main>
    <nav-footer :list="list" @clear='clear'></nav-footer>
</template>
<script>
    import NavHeader from "@/components/navHeader/NavHeader.vue";
    import NavFooter from "@/components/navFooter/NavFooter.vue";
    import NavMain from "@/components/navMain/NavMain.vue";
    import {
        useStore
    } from "vuex";
    import {
        computed,
        defineComponent,
        ref
    } from "vue";
    export default defineComponent({
        name: "Home",
        components: {
            NavHeader,
            NavMain,
            NavFooter,
        },
        setup(props, ctx) {
            let clear = (val) => {
                store.commit('clear', val)
            }
            let del = (val) => {
                store.commit('delTOdo', val)
                //console.info(val)
            }
            let store = useStore();
            let list = computed(() => {
                return store.state.list;
            });
            let value = ref('');
            let add = (val) => {
                value.value = val
                //先判断有没有重复的任务，如果没有就添加
                let flag = true
                list.value.map(element => {
                    if (element.title === value.value) {
                        alert("任务已经存在")
                        flag = false
                    }
                });
                if (flag) {
                    store.commit('addTodo', {
                        title: value.value,
                        complete: false
                    })
                }

            };

            return {
                add,
                value,
                list,
                del,
                clear
            };
        },
    });
</script>
<style lang="scss" scoped></style>